<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
        <title>虎扑跑步运动会</title>
        <link rel="stylesheet" media="screen" href="/static/css/base.css" />
        <link href='/static/css/show/sports.css' rel='stylesheet' />
        <style>
            body, html{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            @media screen and (max-width: 320px){
                body{
                    min-height: 568px;
                    background-size: 100% 568px !important;
                }
                .text{
                    font-size: 1rem;
                }
                .winner-infor{
                    font-size: 1rem;
                }
            }
        </style>
    </head>
    <body class='sport'>
        <p class='lottery'>
            <span class='lottery-left'></span>
            <span style='left: 50%;' class='lottery-right'></span>
        </p>
        <div class='cover none'>
            <div class='bomb'>
                <img class='top-text' src='/static/images/sports/topText.png' />
                <img class='warn-title' src='/static/images/sports/tipTitle.png' />
                <img class='warn' src='/static/images/sports/tip.png' />
                <img class='end' src='/static/images/sports/timesEnd.png' />
                <img class='not' src='/static/images/sports/not.png' />
                <img class='tip-top' src='/static/images/sports/tipTop.png' />
                <img class='nochange' src='/static/images/sports/nochange.png' />
                <img class='warn-little' src='/static/images/sports/little.png' />
                <span class='warn-beggin'>别灰心，继续完成任务再来抽奖吧！</span>
                <span class='warn-text'>别灰心，你还有<i class='warn-number' style='font-style:normal;'></i>次抽奖机会！</span>
                <img class='warn-subbg' src='/static/images/sports/bluebg.png'>
                <img class='warn-continue' src='/static/images/sports/continueLottery.png'>
                <div class='win'>
                    <img class='winning' src='/static/images/sports/winning.png' />
                    <!-- <img class='tshirt' src='/static/images/sports/tshirt.png' /> -->
                    <p class='winner-infor'>获得<span class='meed'></span><br>请填写领奖信息</p>
                    <img class='submitbg' src='/static/images/sports/submitbg.png' />
                    <img class='submitbg2' src='/static/images/sports/submit.png' />
                    <form class='in' name='myForm' method='post'>
                        <p class='name' name='username'><label>姓名: </label><input type='text' class='username' autofocus required/></p>
                        <p><label>电话: </label><input type='text' class='phone' required/></p>
                        <p><label>地址: </label><input type='text' class='address' required/></p>
                        <p class='size-box'><label>尺码: </label><input class='size' type='text' required/></p>
                        <!-- <input class='sub' value='' /> -->
                    </form>

                </div>
            </div>
        </div>
        <div class='text'>
            <p>
                单次完成<span class='arial'>3</span>公里
                {if $projectInfo['maxMileage'] >= 3}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                单次完成<span class='arial'>10</span>公里
                {if $projectInfo['maxMileage'] >= 10}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                累计跑步<span class='arial'>2</span>天
                {if $projectInfo['sumRunDays'] >= 2}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                单次消耗<span class='arial'>500kcal</span>
                {if $projectInfo['maxCalorie'] >= 500}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                累计跑步<span class='arial'>3</span>天
                {if $projectInfo['sumRunDays'] >= 3}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                累计完成<span class='arial'>15</span>公里
                {if $projectInfo['sumMileage'] >= 15}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                累计跑步<span class='arial'>4</span>天
                {if $projectInfo['sumRunDays'] >= 4}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
            <p>
                累积消耗<span class='arial'>1000kcal</span>
                {if $projectInfo['sumCalorie'] >= 1000}
                    <img src='/static/images/sports/hook.png' />
                {/if}
            </p>
        </div>

        <script src="/static/js/jquery.min.js"></script>
        <script>

        //    var domain = 'http://irun-dev.hupu.com/';
           var remainNum = $drawRemain;
           console.log('剩余抽奖次数: ' + remainNum);

           var main = document.querySelector('.main');
           var sport = document.querySelector('.sport');
           var join = document.querySelector('.join');

           // 此属性为真，则可以领取证书；为假，则不能领取
        //    var certificate = true;

           var lotteryLeft = document.querySelector('.lottery-left');
           var lotteryRight = document.querySelector('.lottery-right');

           var cover = document.querySelector('.cover');
           var bomb = document.querySelector('.bomb');
           var bomb2 = document.querySelector('.bomb2');
           var topText = document.querySelector('.top-text');
           var tipTop = document.querySelector('.tip-top');
           var warn = document.querySelector('.warn');
           var warnText = document.querySelector('.warn-text');
           var warnTitle = document.querySelector('.warn-title');
           var warnLittle = document.querySelector('.warn-little');
           var warnBeggin = document.querySelector('.warn-beggin');
           var warnSubbg = document.querySelector('.warn-subbg');
           var warnContinue = document.querySelector('.warn-continue');
           var warnNumber = document.querySelector('.warn-number');
           var nochange = document.querySelector('.nochange');
           var sizeBox = document.querySelector('.size-box');
           var not = document.querySelector('.not');
           var end = document.querySelector('.end');
           var meed = document.querySelector('.meed');
           var text = document.querySelector('.text');

           var win = document.querySelector('.win');

           var rate = (375 / 603).toFixed(2);
           var height = document.body.clientHeight;
           var width = document.body.clientWidth;
           document.body.style.width = Math.floor(rate * height) + 'px';
            text.style.width = width + 'px';
            sport.style.width = width + 'px';
            cover.style.width = width + 'px';

           // 剩余抽奖次数

           var hide = function(){
               win.className = 'win none';
               end.className = 'end none';
               warn.className = 'warn none';
               nochange.className = 'nochange none';
               warnBeggin.className = 'warn-beggin none';
               topText.className = 'top-text none';
               warnTitle.className = 'warn-title none';
               not.className = 'not none';
               tipTop.className = 'tip-top block';
               warnLittle.className = 'warn-little block';
               warnText.className = 'warn-text block';
               warnSubbg.className = 'warn-subbg block';
               warnContinue.className = 'warn-continue block';
               bomb.className = 'bomb to-bottom height32';
           };

           function temp(){
               win.className = 'win none';
               warnLittle.className = 'warn-title none';
               tipTop.className = 'tip-top none';
               warnSubbg.className = 'warn-subbg none';
               nochange.className = 'nochange none';
               warnContinue.className = 'warn-continue none';
               not.className = 'not none';
               warnBeggin.className = 'warn-beggin none';
               warnText.className = 'warn-text none';
               bomb.className = 'bomb to-bottom';
           }

           cover.onclick = function(){
               cover.className = 'cover none';
           };

           warnSubbg.onclick = function(event){
               cover.className = 'cover none';
               setTimeout(function(){
                   lotteryRight.click();
               }, 10);

               event.stopPropagation();
           };
           warnContinue.onclick = function(event){
               cover.className = 'cover none';
               setTimeout(function(){
                   lotteryRight.click();
               }, 10);
               event.stopPropagation();
           };

            var winID = 0;
            var prize = 0;
            console.log('winID = ' + winID + ' prize = ' + prize);
           // 点击 抽奖
           lotteryRight.onclick = function(){
               alert('活动已结束！');
               return;
                warnNumber.innerText = remainNum;

                remainNum--;
                console.log('剩余抽奖次数: ' + remainNum);
                if($drawTotal === 0){
                    cover.className = 'cover blok';
                    temp();
                    warn.className = 'warn none';
                    nochange.className = 'nochange';
                    end.className = 'end none';
                    topText.className = 'top-text';
                    hometitle.className = 'hometitle';
                    return;
                }

                if(remainNum >= 0){
                    $.ajax({
                         method: 'GET',
                         url: '/show/Draw',
                         data: {},
                     }).done(function(data){
                         console.log(data);
                         var winnerID = JSON.parse(data).result.id * 1;
                         meed.innerText = JSON.parse(data).result.prizeName;
                        //  var isWin = winnerID;
                         winID = winnerID;
                         prize = winnerID;
                         console.log('winID = ' + winID + ' - ' + prize);

                         if(winnerID > 0){
                             hide();
                             if(winnerID === 4){
                                  sizeBox.className = 'size-box block';
                             }else{
                                  sizeBox.className = 'size-box none';
                             }
                              win.className = 'win block';
                              warnText.className = 'warn-text none';
                              warnContinue.className = 'warn-continue none';
                              warnSubbg.className = 'warn-subbg none';
                              warnLittle.className = 'warn-little none';
                              bomb.className = 'bomb2 to-bottom height68';
                              tipTop.style.top = '-7%';
                              return;
                         }

                     }).fail(function(data){
                            console.log("fail" + data);
                            var winnerID = JSON.parse(data).result.id * 1;
                            meed.innerText = JSON.parse(data).result.prizeName;
                            // var isWin = winnerID;
                            winID = winnerID;
                            prize = winnerID;
                            console.log('winID = ' + winID + ' - ' + prize);

                            if(winnerID > 0){
                                 hide();
                                 if(winnerID === 4){
                                      sizeBox.className = 'size-box';
                                      sizeBox.show();
                                 }else{
                                      sizeBox.className = 'size-box none';
                                 }
                                 win.className = 'win block';
                                 warnText.className = 'warn-text none';
                                 warnContinue.className = 'warn-continue none';
                                 warnSubbg.className = 'warn-subbg none';
                                 warnLittle.className = 'warn-little none';
                                 bomb.className = 'bomb2 to-bottom height68';
                                 tipTop.style.top = '-7%';
                                 return;
                            }
                     });
                }

               // lotteryTimes--;
               cover.className = 'cover show';
                // console.log(remainNum);
               switch (remainNum){
                   case 0:
                      hide();
                      warnNumber.innerText = '0';
                      warn.className = 'warn none';
                      break;
                   case 1:
                       hide();
                       warnNumber.innerText = '1';
                       warn.className = 'warn none';
                       break;
                   case 2:
                       hide();
                       warnNumber.innerText = '2';
                       break;
                   case 3:
                       hide();
                       warnNumber.innerText = '3';
                       break;
                   case 4:
                       hide();
                       warnNumber.innerText = '4';
                       break;
                   case 5:
                       hide();
                       warnNumber.innerText = '5';
                       break;
                   case 6:
                       hide();
                       warnNumber.innerText = '6';
                       break;
                   case 7:
                       hide();
                       warnNumber.innerText = '7';
                       break;
                   default:
                       temp();
                       topText.className = 'top-text';
                       warnTitle.className = 'warn-title';
                       warn.className = 'warn none';
                       nochange.className = 'nochange none';
                       end.className = 'end block';
                       break;
               }

           };

           bomb.onclick = function(event){

               event.stopPropagation();
           };

			var now = parseInt(Date.now() / 1000);
			// console.log('now time: ' + now + ' --- end time: ' + $endtime);
           // 点击 个人证书
           lotteryLeft.onclick = function(){
                // alert(remainNum);
                if(!$isCertificate){
                    win.className = 'win none';
                    not.className = 'not block';
                    end.className = 'end none';
                    nochange.className = 'nochange none';
                    topText.className = 'top-text block';
                    warnTitle.className = 'warn-title block';
                    cover.className = 'cover show';
                    warnLittle.className = 'warn-title none';
                    tipTop.className = 'tip-top none';
                    warn.className = 'warn none';
                    warnSubbg.className = 'warn-subbg none';
                    warnContinue.className = 'warn-continue none';
                    warnText.className = 'warn-text none';
                    warnBeggin.className = 'warn-beggin none';
                    bomb.className = 'bomb to-bottom';
                }
                // console.log('certificate: ' + $drawTotal);
				console.log('drawTotal = ' + $drawTotal + ' -- now = ' + now + ' -- endtime = ' + $endtime);
                if($drawTotal === 0 && now > $endtime){
                    win.className = 'win none';
                    not.className = 'not none';
                    end.className = 'end none';
                    nochange.className = 'nochange none';
                    topText.className = 'top-text block';
                    warnTitle.className = 'warn-title block';
                    cover.className = 'cover show';
                    warnLittle.className = 'warn-title none';
                    tipTop.className = 'tip-top none';
                    warn.className = 'warn block';
                    warnSubbg.className = 'warn-subbg none';
                    warnContinue.className = 'warn-continue none';
                    warnText.className = 'warn-text none';
                    warnBeggin.className = 'warn-beggin none';
                    bomb.className = 'bomb to-bottom';
                    return;
                }
                var drawTotal = $drawTotal;
                // alert('total ' + drawTotal);
                $.ajax({
                    method: 'GET',
                    url: '/show/certificate?drawTotal='+drawTotal
                    //data: {'drawTotal': drawTotal}
                }).done(function(data){
                    // alert(data);
                }).fail(function(error){
                    console.log(error);
                });

                if($drawTotal === 8){
					if(drawTotal){
						window.location = '/show/certificate?drawTotal='+drawTotal;
					}

                }

               if($isCertificate){
				    if(drawTotal){
					    window.location = '/show/certificate?drawTotal='+drawTotal;
				    }

               }else{
                   win.className = 'win none';
                   not.className = 'not block';
                   end.className = 'end none';
                   topText.className = 'top-text block';
                   warnTitle.className = 'warn-title block';
                   cover.className = 'cover show';
                   warnLittle.className = 'warn-title none';
                   tipTop.className = 'tip-top none';
                   warn.className = 'warn none';
                   warnSubbg.className = 'warn-subbg none';
                   warnContinue.className = 'warn-continue none';
                   warnText.className = 'warn-text none';
                   warnBeggin.className = 'warn-beggin none';
                   bomb.className = 'bomb to-bottom';
               }

           };

           var cover = document.querySelector('.cover');
            // var sub = document.querySelector('.sub');

        $(function(){
            $('.submitbg2').on('click', submitInfo);
            $('.submitbg').on('click', submitInfo);

            function submitInfo() {
                var phone = $('.phone');
                phone.value = phone.val();
                var name = $('.username');
                name.value = name.val();
                var address = $('.address');
                address.value = address.val();
                var prize = $('.prize');
                prize.value = prize.val();
                var size = $('.size');
                size.value = size.val();
                //alert(phone.value + " -- " + name.value + " -- " + address.value + " -- " + size.value + ' prize: ' + winID);

                if(!phone.value || !name.value || !address.value){
					alert('亲，请信息填写完毕再提交哦!')
                    return;
                }
                // alert(domain + ' -- ' + winID);
                $.ajax({
                    type: 'post',
                    url: '/show/saveWinning',
                    dataType: 'json',
                    data: {
                        name: name.value,
                        phone: phone.value,
                        address: address.value,
                        prize: winID,
                        size: size.value
                    }
                })
                .done(function(data){
                    console.log(JSON.parse(JSON.stringify(data)).status.code);
                    var code = JSON.parse(JSON.stringify(data)).status.code;
                    if(code === 200){
                        alert('信息提交成功');
                    }else{
                        alert('信息提交失败，请重新提交');
                    }
                    cover.className = 'cover none';
                }).fail(function(data){
                    console.log(JSON.parse(JSON.stringify(data)).status.code);
                    var code = JSON.parse(JSON.stringify(data)).status.code;
                    var code = JSON.parse(temp).status.code;
                    console.log(code);
                    if(code === 200){
                        alert('信息提交成功');
                    }else{
                        alert('信息提交失败，请重新提交');
                    }
                    cover.className = 'cover none';
                });
            }
        });

        </script>
    </body>
</html>
